<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础饼图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="mountNode"></div>
<div>
    <button>导出</button>
</div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.11/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
<script>
'use strict';

var _DataSet = DataSet,
    DataView = _DataSet.DataView;

// 资本总额
var data = [
{ item: '500 万及以上', count: 2714542 },
{ item: '100万-500万', count: 2632827 },
{ item: '50万-100万', count: 775042 },
{ item: '10万-50万', count: 222297 },
{ item: '10万以下', count: 136425 }
];
var dv = new DataView();
dv.source(data).transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
});
var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight - 50
});
chart.source(dv, {
  percent: {
    formatter: function formatter(val) {
      //val = val.toFixed(2);
      //val = Math.floor(val * 100) / 100
      //val = val * 100 + '%';
       var str=Number(val*100).toFixed(2);
       str+="%";
      return str;
    }
  }
});
chart.coord('theta', {
  radius: 0.75
});
chart.tooltip({
  showTitle: false,
  itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.intervalStack().position('percent').color('item').label('percent', {
  formatter: function formatter(val, item) {
    return item.point.item + ': ' + val;
  }
}).tooltip('item*percent', function (item, percent) {
  percent = percent * 100 + '%';
  return {
    name: item,
    value: percent
  };
}).style({
  lineWidth: 1,
  stroke: '#fff'
});
chart.render();

// 导出图片
var btn = document.getElementsByTagName('button')[0]
btn.onclick = expImg

function expImg() {
    chart.downloadImage()
}
</script>
</body>
</html>
